<template>
  <div>


    <div class="selectStype">

      <el-select class="inputWidth" v-model="brand" placeholder="产品分类" @change="getData">
        <el-option v-for="(option, index) in brandOptions" :key="index" :label="option.title"
          :value="option.id"></el-option>
      </el-select>

    </div>

    <div class="tableData">

      <div class="allCheck">
        <el-checkbox v-model="isAllSelected" @change="handleAllSelect">全选</el-checkbox>
        <!-- <span class="delent">删除选中</span> -->
        <button class="payTj" @click="setFavorite()">设为推荐</button>
        <button class="colseTj" @click="cancelFavorite()">取消推荐</button>
        <button class="delent" @click="deleteAllFunc()">删除</button>

        <el-input placeholder="输入搜索关键字" v-model="keyword" class="searchStype">
          <i slot="suffix" class="el-icon-search" @click="getData"></i>
        </el-input>


      </div>


      <div>


        <div v-for="(goods, index) in goodsList" :key="index" class="goods-item">


          <div style="display: flex;align-items: center;">
            <el-checkbox v-model="goods.checked" ></el-checkbox>
            <img :src="goods.imageUrl[0]" alt="商品图片" v-if="goods.imageUrl.length > 0">
            <div>
              <p class="goodsName">{{ goods.title }}</p>
              <p style="font-weight: 400;">￥{{ goods.price }}</p>
            </div>
          </div>

          <!-- <div class="goodsPrice">
        <p>￥{{goods.price}}</p>
       </div> -->

          <div>
            <button style="color: #328E00;" class="gwcButton" v-if="goods.status == 2">审核通过</button>
            <button style="color: #328E00;" class="gwcButton" v-if="goods.status == 1">待审核</button>
            <button style="color: #328E00;" class="gwcButton" v-if="goods.status == -1">审核不通过</button>
            <button style="color: #A5A5A5;" class="colseSc" @click="uplateShelves(goods)"
              v-if="goods.shelves == 1 && goods.status == 2">已上架</button>
            <button style="color: #333333;" class="gwcButton" @click="deleteShelves(goods)"
              v-if="goods.shelves == -1 && goods.status == 2">下架</button>
            <button style="color: #333333;" class="colseSc" @click="editProduct(goods)">编辑</button>
            <button style="color: #333333;" class="colseSc" @click="deleteFunc(goods)">删除</button>
          </div>

        </div>

      </div>



    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "allProduct",
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  data() {
    return {
      keyword:'',
      brand: "",
      brandOptions: [
      ],
      goodsList: [
        // {
        //   imageUrl: 'https://www.keaitupian.cn/cjpic/frombd/0/253/3680147856/2045951790.jpg', // 请替换为实际图片地址
        //   name: '商品名称文字商品名称文字商品',
        //   price: 5000
        // },
        // {
        //   imageUrl: 'https://www.keaitupian.cn/cjpic/frombd/0/253/3680147856/2045951790.jpg', // 请替换为实际图片地址
        //   name: '商品名称文字商品名称文字',
        //   price: 8000
        // }
      ],
      selectedGoods: [],
      isAllSelected: false
    }
  },
  created() {
    this.getData();
    this.getType();
  },
  methods: {
    getData() {
      console.log(this.brand,'this.brand')
      this.$httpApi("/api/proList", {
        token: this.userInfo.token,
        channel_id: this.brand ? this.brand : undefined,
        keyword:this.keyword? this.keyword : undefined,
        page: 1,
        page_size: 10000
      }, 'get').then(res => {
        if (res.code == 200) {
          console.log(res)
          res.data.list.map(item => {
            console.log(item.thumb)
            item.imageUrl = item.thumb.split(',');
            item.checked = false;
          })
          this.goodsList = res.data.list;

        } else {
          alertErr(res.msg);
        }
      })
    },
    getType() {
      this.$httpApi("/api/channelList", {
      }, 'get').then(res => {
        this.brandOptions = res.data;
      })
    },
    addToCart(goods) {
      console.log(`将商品 ${goods.name} 加入购物车`);
      // 这里添加将商品加入购物车的实际逻辑，比如发送请求到后端
    },
    cancelFavorite(goods) {
      let temp = [];
      this.goodsList.map(item => {
        if(item.checked){
          temp.push(item.id)
        }
      })

      if(temp.length == 0){
        alertErr("请选择要设置推荐的商品")
        return; 
      }
      this.$confirm('确认取消推荐该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$httpApi("/api/multiProNoRec", {
          ids: temp.join(','),
          token: this.userInfo.token,
        }, 'get').then(res => {
          if (res.code == 200) {
            alertSucc("操作成功")
            this.getData();
          } else {
            alertErr(res.msg);
          }
        }).catch(err => {
          alertErr(err.msg);
        })
      }).catch(() => {
        // 取消操作
      });
    },
    handleAllSelect() {
      if (this.isAllSelected) {
        this.goodsList.map(item => item.checked = true);
      } else {
        this.goodsList.map(item => item.checked = false);
      }
    },
    deleteSelected() {
      console.log('删除选中的商品');
      // 这里添加删除选中商品的实际逻辑，比如发送请求到后端
    },
    deleteFunc(item) {
      this.$confirm('确认删除该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$httpApi("/api/multiProDel", {
          ids: item.id,
          token: this.userInfo.token,
        }, 'get').then(res => {
          if (res.code == 200) {
            alertSucc("删除成功")
            this.getData();
          } else {
            alertErr(res.msg);
          }
        }).catch(err => {
          alertErr(err.msg);
        })
      }).catch(() => {
        // 取消操作
      });
    },
    setFavorite(){
      let temp = [];
      this.goodsList.map(item => {
        if(item.checked){
          temp.push(item.id)
        }
      })

      if(temp.length == 0){
        alertErr("请选择要设置推荐的商品")
        return; 
      }
      this.$confirm('确认推荐该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$httpApi("/api/multiProRec", {
          ids: temp.join(','),
          token: this.userInfo.token,
        }, 'get').then(res => {
          if (res.code == 200) {
            alertSucc("操作成功")
            this.getData();
          } else {
            alertErr(res.msg);
          }
        }).catch(err => {
          alertErr(err.msg);
        })
      }).catch(() => {
        // 取消操作
      });
    },
    uplateShelves(item){
      this.$httpApi("/api/shelves", {
          id: item.id,
          shelves: 1,
          token: this.userInfo.token,
        }, 'get').then(res => {
          if (res.code == 200) {
            alertSucc("操作成功")
            this.getData();
          } else {
            alertErr(res.msg);
          }
        }).catch(err => {
          alertErr(err.msg);
        })
    },
    deleteShelves(item){
      this.$httpApi("/api/shelves", {
          id: item.id,
          shelves: -1,
          token: this.userInfo.token,
        }, 'get').then(res => {
          if (res.code == 200) {
            alertSucc("操作成功")
            this.getData();
          } else {
            alertErr(res.msg);
          }
        }).catch(err => {
          alertErr(err.msg);
        })
    },
    deleteAllFunc(){
      let temp = [];
      this.goodsList.map(item => {
        if(item.checked){
          temp.push(item.id)
        }
      })

      if(temp.length == 0){
        alertErr("请选择要删除的商品")
        return; 
      }
      this.$confirm('确认删除该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$httpApi("/api/multiProDel", {
          ids: temp.join(','),
          token: this.userInfo.token,
        }, 'get').then(res => {
          if (res.code == 200) {
            alertSucc("删除成功")
            this.getData();
          } else {
            alertErr(res.msg);
          }
        }).catch(err => {
          alertErr(err.msg);
        })
      }).catch(() => {
        // 取消操作
      });

    },
    editProduct(item){
      this.$emit('editProduct', item)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-input__inner {

  height: 32px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #C4C4C4;

  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  font-size: 12px;
  color: #CCCCCC;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.searchStype {
  width: 220px;
  margin-left: 570px;
}

.selectStype {
  padding: 20px 32px 0 32px;
}

.inputWidth {
  width: 167px;

}

.goodsName {
  width: 275px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 10px;
}

.colseSc {
  font-size: 14px;
  font-weight: 400;
}

.gwcButton {
  font-size: 14px;
  font-weight: 400;
}

.goodsPrice {
  margin-left: 115px;
  width: 310px;
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  font-style: normal;
  text-transform: none;
}

/* 简单的样式 */
.goods-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #EBEEF5;
  padding-left: 24px;
  height: 120px;
  justify-content: space-between;
}

.goods-item img {
  width: 110px;
  height: 80px;
  margin-right: 30px;
  margin-left: 70px;
}

.goods-item button {

  margin-right: 32px;
}

.payTj {
  width: 78px;
  height: 32px;
  background: #0052D9;
  border-radius: 4px 4px 4px 4px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 31px;
  font-style: normal;
  text-transform: none;
  line-height: 32px;
}

.colseTj {
  width: 78px;
  height: 32px;
  background: rgba(0, 82, 217, 0.1);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #0052D9;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052D9;
  margin-left: 10px;
  margin-right: 10px;
  font-style: normal;
  text-transform: none;
  line-height: 32px;
}

.delent {

  width: 50px;
  height: 32px;
  background: #FF8888;
  border-radius: 4px 4px 4px 4px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;

  font-style: normal;
  text-transform: none;
  line-height: 32px;
}

.tableData {
  padding: 20px 32px;
}

.allCheck {
  width: 1150px;
  height: 50px;
  background: #F5F5F5;
  border-radius: 0px 0px 0px 0px;
  padding: 0 24px;
  line-height: 50px;


  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #666666;

  font-style: normal;
  text-transform: none;
}

.title {
  height: 56px;
  background: #FFFFFF;
  line-height: 56px;
  border-radius: 0px 0px 0px 0px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  border-bottom: 4px solid #F5F5F5;
  padding-left: 32px;
}
</style>